<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D图片(转转转)</title>
<style>
*{padding: 0;margin: 0;vertical-align: middle;list-style: none;}
#box{
    width: 220px;
    height: 150px;
    position: relative;
    margin: 100px auto;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    perspective: 2500px;
    text-align: center;

}
#uls{
    width: 220px;
    height: 112px;  
}
#uls li{
    
    position: absolute;
    left: 0px;
    top: 0px;
}
#btn{
    width: 85px;
    height: 50px;
    font-size: 24px;
    margin-top: 50px;
    color: antiquewhite;
    background: skyblue;
    border: none;
}

</style>    
</head>
<body>
<div id="box">
    <ul id="uls">
        <li><img src="img/g1.jpg" alt=""></li>
        <li><img src="img/g2.jpg" alt=""></li>
        <li><img src="img/g3.jpg" alt=""></li>
        <li><img src="img/g4.jpg" alt=""></li>
        <li><img src="img/g5.jpg" alt=""></li>
        <li><img src="img/g6.jpg" alt=""></li>
        <li><img src="img/g7.jpg" alt=""></li>
        <li><img src="img/g8.png" alt=""></li>
        <li><img src="img/g9.jpg" alt=""></li>
    </ul>

<button id="btn">转转转</button>
</div>
<script>
var lis = document.querySelectorAll('#uls li');
var btn = document.getElementById('btn');
for(var i=0; i < lis.length; i++){
    console.log(i)
    lis[i].style.transform = 'rotateY('+ 360/lis.length*i +'deg) translateZ(400px)';
}
var num = 0;
btn.onclick = function(){
    num++;
    for(var i=0;i < lis.length;i++){
        lis[i].style.transition = '1s';
        lis[i].style.transform = 'rotateY('+ (360/lis.length*i + 360/lis.length * num)+'deg) translateZ(400px)';
    }
}

</script>
</body>
</html>